<!--
 * @Author: vaseBox 994279430@qq.com
 * @Date: 2025-04-21 14:22:05
 * @LastEditors: vaseBox 994279430@qq.com
 * @LastEditTime: 2025-04-21 14:25:56
 * @FilePath: /main-vite-ts/src/components/main/container.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<script lang="ts" setup>
import { ref } from "vue";
import { defineMicroApp } from "micro-app-framework"; // Replace with the actual micro-app library you're using

// Define a micro-app
const microApp = defineMicroApp({
  name: "example-app",
  entry: "https://example.com", // Replace with your micro-app's entry URL
  container: "#micro-app-container",
  props: {
    user: "John Doe",
  },
});

// State management
const isAppLoaded = ref(false);

// Event handlers
function handleAppLoad() {
  isAppLoaded.value = true;
}

function handleAppError(error: any) {
  console.error("MicroApp Error:", error);
}
</script>

<template>
  <div>
    <h1>MicroApp Container</h1>
    <div id="micro-app-container"></div>
    <p v-if="isAppLoaded">MicroApp is loaded!</p>
    <p v-else>Loading MicroApp...</p>
  </div>
</template>

<style scoped>
#micro-app-container {
  width: 100%;
  height: 500px;
  border: 1px solid #ccc;
}
</style>
